<template>
  <!-- 雷达图 -->
  <div style="height:360px;width:100%;overflow: hidden;">
    <Row
      v-if="option.series.length==0"
      style="height:360px;background: white;"
      type="flex"
      align="middle"
      justify="center"
    >
      <img src="~@/assets/img/efficiencyAnalysis/zwsj.png" height="50%" />
    </Row>
    <div ref="main" style="overflow: hidden;height:360px;"></div>
  </div>
</template>

<script>
import { Style } from "./echartsStyle.js";
export default {
  props: {
    viewData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      option: {
        color: Style.color,
        tooltip: {},
        radar: {
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: "电压合格率", max: 2000 },
            { name: "变压器负载率", max: 2000 },
            { name: "功率因数", max: 2000 },
            { name: "电压不平衡", max: 2000 },
            { name: "电流不平衡", max: 2000 }
          ]
        },
        series: [
          {
            type: "radar",
            data: [
              {
                value: this.viewData != [] ? this.viewData : [],
                name: "雷达"
              }
            ]
          }
        ]
      }
    };
  },
  computed: {},
  watch: {
    viewData(value) {
      this.option.series = [
        {
          type: "radar",
          data: [
            {
              value: value,
              name: "雷达"
            }
          ]
        }
      ];
      let myChart = this.$echarts.init(this.$refs.main);
      myChart.setOption(this.option, true);
    }
  },
  methods: {},
  created() {},
  mounted() {
    let myChart = this.$echarts.init(this.$refs.main);
    myChart.setOption(this.option);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>